import React from "react";
import {View, Dimensions, Image, StyleSheet, Text, FlatList} from "react-native";
import BasePage from "./BasePage";
import HttpUtil from "../network/HttpUtil";
import PlatformTouchable from "react-native-platform-touchable";


const WIN_WIDTH = Dimensions.get("window").width;

//
class NetworkRecordsPage extends BasePage {

  //隐藏navigationBar
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      title: "网络日志",
      headerRight:<View />
    };
  };

  constructor(){
    super();
    this.state = {data: HttpUtil.getNetworkRecords().reverse()};
  }

  renderItem = ({item, index}) => {
    console.log(item);
    return <PlatformTouchable onPress={()=>this.showPage('NetworkRecordDetailPage', {item: item})}><View style={{alignItems: 'stretch', padding: 15}}>
      <Text style={{fontSize:14, color:'midnightblue', fontWeight: '500'}}>{item.config.url.replace(item.config.baseURL,'')}</Text>
      <Text style={{marginTop: 8, color:'#888', fontSize:13}}>{item.date} </Text>
    </View></PlatformTouchable>
  };

  renderContent() {
    return (<View
      style={{ flex: 1, alignItems: "stretch", width: WIN_WIDTH, backgroundColor:'#F7F7F7' }}
    >
      <FlatList
        style={{backgroundColor: '#F8F8F8'}}
        data={this.state.data}
        renderItem={this.renderItem}
        ItemSeparatorComponent={() => <View style={{backgroundColor: '#ECECED', height: 0.5}}/>}
      />
    </View>)
      ;
  }
}
const styles = StyleSheet.create({

});
export default NetworkRecordsPage;
